<template>
	<div>
		<el-form :model="adpayee" class="w-full flex flex-wrap" :label-width="language == 'en' ? '180' : '130'">
			<div class="w-1/2">
				<el-form-item :label="$t('strategy.payee.name') + ':'" prop="sp_name" class="w-full">
					<el-input v-model="adpayee.sp_name" :placeholder="$t('message.pleaseEnter')" />
				</el-form-item>
			</div>
			<div class="w-1/2">
				<el-form-item :label="$t('strategy.payee.type') + ':'" prop="payee_type" class="w-full">
					<el-select v-model="adpayee.payee_type" :placeholder="$t('message.pleaseSelect')"
						@change="getpaytype" :disabled="adpayee.sp_id == undefined ? false : true">
						<el-option v-for="item in paytype" :key="item.value" :label="$t(item.label)" :value="item.value" />
					</el-select>
				</el-form-item>
			</div>

			<div class="w-1/2">
				<el-form-item :label="$t('strategy.payee.Appid')" prop="app_id" class="w-full">
					<el-input v-model="adpayee.app_id" :placeholder="$t('message.pleaseEnter')" />
				</el-form-item>
			</div>
			<div class="w-1/2" v-if="adpayee.payee_type == 1 || adpayee.payee_type == 3 ? true : false">
				<el-form-item :label="$t('strategy.payee.merchantID') + ':'" prop="mch_id" class="w-full">
					<el-input v-model="adpayee.mch_id" :placeholder="$t('message.pleaseEnter')" />
				</el-form-item>
			</div>
			<div class="w-1/2">
				<el-form-item prop="title" :label="$t('strategy.payee.payName')">
					<template #default="scope">
						<el-input v-model="adpayee.title" :placeholder="$t('message.pleaseEnter')" />
					</template>
				</el-form-item>
			</div>
			<div class="w-1/2">
				<el-form-item :label="$t('strategy.payee.payIcon') + ':'" prop="ico" class="w-full">
					<el-input v-model="adpayee.ico" :placeholder="$t('message.pleaseEnter')">
						<template #append>
							<Upload :list="{ 'data': 'pem', 'list': false }" :type="99" :uptype="2" @exposeData="expose"
								@click="advance('ico')" />
						</template>
					</el-input>
				</el-form-item>
			</div>
			<div class="w-1/2">
				<el-form-item :label="$t('strategy.payee.state') + ':'" prop="status" class="w-full">
					<el-select v-model="adpayee.status" :placeholder="$t('message.pleaseSelect')">
						<el-option :label="$t('public.enable')" :value="1" />
						<el-option :label="$t('public.disable')" :value="2" />
					</el-select>
				</el-form-item>
			</div>
			<div class="w-full">
				<div v-if="adpayee.payee_type == 1" class="flex flex-wrap">
					<!-- 微信支付 -->
					<div class="w-1/2">
						<el-form-item :label="$t('strategy.payee.payKey') + ':'" prop="key" class="w-full">
							<el-input v-model="data.content.key" :placeholder="$t('message.pleaseEnter')" />
						</el-form-item>
					</div>
					<div class="w-1/2">
						<el-form-item :label=" $t('strategy.payee.SerialNum') + ':'" prop="serial" class="w-full">
							<el-input v-model="data.content.serial" :placeholder="$t('message.pleaseEnter')" />
						</el-form-item>
					</div>

					<div class="w-1/2">
						<el-form-item :label="'CERT' + $t('strategy.payee.certificates') + ':'" prop="cert_path"
							class="w-full">
							<el-input v-model="data.content.cert_path" :placeholder="$t('message.pleaseEnter')">
								<template #append>
									<Upload :list="{ 'data': 'pem', 'list': false }" :type="99" :uptype="2"
										@exposeData="expose" @click="advance('cert_path')" />
								</template>
							</el-input>
						</el-form-item>
					</div>
					<div class="w-1/2">
						<el-form-item :label="'Key' + $t('strategy.payee.certificates') + ':'" prop="key_path"
							class="w-full">
							<el-input v-model="data.content.key_path" :placeholder="$t('message.pleaseEnter')">
								<template #append>
									<Upload :list="{ 'data': 'pem', 'list': false }" :type="99" :uptype="2"
										@exposeData="expose" @click="advance('key_path')" />
								</template>
							</el-input>
						</el-form-item>
					</div>
					<div class="w-1/2">
						<el-form-item :label=" $t('strategy.payee.certPlatform') + ':'" prop="platform_path" class="w-full">
							<el-input v-model="data.content.platform_path" :placeholder="$t('message.pleaseEnter')" disabled>
								<template #append>
									<!-- <Upload :list="{ 'data': 'pem', 'list': false }" :type="99" :uptype="2"
										@exposeData="expose" @click="advance('platform_path')" /> -->
										<span class="cursor-pointer" @click="getPlatform">{{ $t('strategy.payee.obtain') }}</span>
								</template>
							</el-input>
						</el-form-item>
					</div>
					<div class="w-1/2">
						<el-form-item :label=" $t('strategy.payee.certPlatformNum') + ':'" prop="platform_serial"
							class="w-full">
							<el-input v-model="data.content.platform_serial" :placeholder="$t('message.pleaseEnter')" disabled/>
						</el-form-item>
					</div>
					<div class="w-1/2">
						<el-form-item :label=" $t('strategy.payee.modifyTime') + ':'" prop="platform_update_time" class="w-full">
							<el-input v-model="data.content.platform_update_time" :placeholder="$t('message.pleaseEnter')" readonly disabled />
						</el-form-item>
					</div>
					<div class="w-1/2">
						<el-form-item :label="'V3' + $t('strategy.payee.secretKey') + ':'" prop="v3_key" class="w-full">
							<el-input v-model="data.content.v3_key" :placeholder="$t('message.pleaseEnter')" />
						</el-form-item>
					</div>
					<div class="w-1/2">
						<el-form-item :label="$t('strategy.payee.enterprise') + ':'" prop="to_balance" class="w-full">
							<el-select v-model="data.content.to_balance" :placeholder="$t('message.pleaseSelect')">
								<el-option :label="$t('strategy.payee.activated')" :value="1" />
								<el-option :label="$t('strategy.payee.notActivated')" :value="0" />
							</el-select>
						</el-form-item>
					</div>
					<div class="w-1/2">
						<el-form-item :label="$t('strategy.payee.merchant') + ':'" prop="to_batches" class="w-full">
							<el-select v-model="data.content.to_batches" :placeholder="$t('message.pleaseSelect')">
								<el-option :label="$t('strategy.payee.activated')" :value="1" />
								<el-option :label="$t('strategy.payee.notActivated')" :value="0" />
							</el-select>
						</el-form-item>
					</div>
				</div>
				<div v-if="adpayee.payee_type == 2" class="flex flex-wrap">
					<div class="w-1/2">
						<el-form-item :label="$t('strategy.payee.merchantID') + ':'" prop="pid" class="w-full">
							<el-input v-model="data.content.pid" :placeholder="$t('message.pleaseEnter')" />
						</el-form-item>
					</div>
					<div class="w-1/2">
						<el-form-item :label="'AES' + $t('strategy.payee.secretKey') + ':'" prop="aes_key"
							class="w-full">
							<el-input v-model="data.content.aes_key" :placeholder="$t('message.pleaseEnter')" />
						</el-form-item>
					</div>
					<div class="w-1/2">
						<el-form-item :label="$t('strategy.payee.privateKey') + ':'" prop="private_key_path"
							class="w-full">
							<el-input v-model="data.content.private_key_path" :placeholder="$t('message.pleaseEnter')"
								readonly>
								<template #append>
									<Upload :list="{ 'data': 'pem', 'list': false }" :type="99" :uptype="2"
										@exposeData="expose" @click="advance('private_key_path')" />
								</template>
							</el-input>
						</el-form-item>
					</div>
					<div class="w-1/2">
						<el-form-item :label="$t('strategy.payee.publicKey') + ':'" prop="app_public_key_path"
							class="w-full">
							<el-input v-model="data.content.app_public_key_path"
								:placeholder="$t('message.pleaseEnter')" readonly>
								<template #append>
									<Upload :list="{ 'data': 'pem', 'list': false }" :type="99" :uptype="2"
										@exposeData="expose" @click="advance('app_public_key_path')" />
								</template>
							</el-input>
						</el-form-item>
					</div>
					<div class="w-1/2">
						<el-form-item :label="$t('strategy.payee.root') + ':'" prop="ali_root_cert_path" class="w-full">
							<el-input v-model="data.content.ali_root_cert_path" :placeholder="$t('message.pleaseEnter')"
								readonly>
								<template #append>
									<Upload :list="{ 'data': 'pem', 'list': false }" :type="99" :uptype="2"
										@exposeData="expose" @click="advance('ali_root_cert_path')" />
								</template>
							</el-input>
						</el-form-item>
					</div>
					<div class="w-1/2">
						<el-form-item :label="$t('strategy.payee.alipayPublicKey') + ':'" prop="ali_public_key_path"
							class="w-full">
							<el-input v-model="data.content.ali_public_key_path"
								:placeholder="$t('message.pleaseEnter')" readonly>
								<template #append>
									<Upload :list="{ 'data': 'pem', 'list': false }" :type="99" :uptype="2"
										@exposeData="expose" @click="advance('ali_public_key_path')" />
								</template>
							</el-input>
						</el-form-item>
					</div>
					<div class="w-1/2">
						<el-form-item :label="$t('strategy.payee.balance') + ':'" prop="to_balance" class="w-full">
							<el-select v-model="data.content.to_balance" :placeholder="$t('message.pleaseSelect')">
								<el-option :label="$t('strategy.payee.activated')" :value="1" />
								<el-option :label="$t('strategy.payee.notActivated')" :value="0" />
							</el-select>
						</el-form-item>
					</div>
				</div>
				<div v-if="adpayee.payee_type == 3" class="flex flex-wrap">
					<!-- 通联支付 -->
					<div class="w-1/2">
						<el-form-item :label="'RSA' + $t('strategy.payee.privateKeys') + ':'" prop="private_key"
							class="w-full">
							<el-input v-model="data.content.private_key" :placeholder="$t('message.pleaseEnter')"
								readonly>
								<template #append>
									<Upload :list="{ 'data': 'pem', 'list': false }" :type="99" :uptype="2"
										@exposeData="expose" @click="advance('private_key')" />
								</template>
							</el-input>
						</el-form-item>
					</div>

					<div class="w-1/2">
						<el-form-item :label="'RSA' + $t('strategy.payee.publicKeys') + ':'" prop="public_key"
							class="w-full">
							<el-input v-model="data.content.public_key" :placeholder="$t('message.pleaseEnter')">
								<template #append>
									<Upload :list="{ 'data': 'pem', 'list': false }" :type="99" :uptype="2"
										@exposeData="expose" @click="advance('public_key')" />
								</template>
							</el-input>
						</el-form-item>
					</div>

					<div class="w-1/2">
						<el-form-item :label="'SM2' + $t('strategy.payee.privateKeys') + ':'" prop="sm2_private_key"
							class="w-full">
							<el-input v-model="data.content.sm2_private_key" :placeholder="$t('message.pleaseEnter')">
								<template #append>
									<Upload :list="{ 'data': 'pem', 'list': false }" :type="99" :uptype="2"
										@exposeData="expose" @click="advance('sm2_private_key')" />
								</template>
							</el-input>
						</el-form-item>
					</div>

					<div class="w-1/2">
						<el-form-item :label="'SM2' + $t('strategy.payee.publicKeys') + ':'" prop="sm2_public_key"
							class="w-full">
							<el-input v-model="data.content.sm2_public_key" :placeholder="$t('message.pleaseEnter')">
								<template #append>
									<Upload :list="{ 'data': 'pem', 'list': false }" :type="99" :uptype="2"
										@exposeData="expose" @click="advance('sm2_public_key')" />
								</template>
							</el-input>
						</el-form-item>
					</div>

					<div class="w-1/2">
						<el-form-item :label="$t('strategy.payee.runtime') + ':'" prop="test" class="w-full">
							<el-select v-model="data.content.test" :placeholder="$t('message.pleaseSelect')">
								<el-option :label="$t('strategy.payee.test')" :value="true" />
								<el-option :label="$t('strategy.payee.production')" :value="false" />
							</el-select>
						</el-form-item>
					</div>

				</div>

				<div v-if="adpayee.payee_type == 4" class="flex flex-wrap">
					<!-- 京东收银 -->
					<div class="w-1/2">
						<el-form-item :label="$t('strategy.payee.agent') + ':'" prop="agentNum" class="w-full">
							<el-input v-model="data.content.agentNum" :placeholder="$t('message.pleaseEnter')" />
						</el-form-item>
					</div>

					<div class="w-1/2">
						<el-form-item :label="$t('strategy.payee.merchants') + ':'" prop="customerNum" class="w-full">
							<el-input v-model="data.content.customerNum" :placeholder="$t('message.pleaseEnter')" />
						</el-form-item>
					</div>

					<div class="w-1/2">
						<el-form-item :label="$t('strategy.payee.store') + ':'" prop="shopNum" class="w-full">
							<el-input v-model="data.content.shopNum" :placeholder="$t('message.pleaseEnter')" />
						</el-form-item>
					</div>

					<div class="w-1/2">
						<el-form-item :label="$t('strategy.payee.publicKeys') + ':'" prop="accessKey" class="w-full">
							<el-input v-model="data.content.accessKey" :placeholder="$t('message.pleaseEnter')" />
						</el-form-item>
					</div>

					<div class="w-1/2">
						<el-form-item :label="$t('strategy.payee.privateKeys') + ':'" prop="secretKey" class="w-full">
							<el-input v-model="data.content.secretKey" :placeholder="$t('message.pleaseEnter')" />
						</el-form-item>
					</div>

					<div class="w-1/2">
						<el-form-item :label="$t('strategy.payee.accountParty') + ':'" prop="bill_account"
							class="w-full">
							<el-input v-model="data.content.bill_account" :placeholder="$t('message.pleaseEnter')" />
						</el-form-item>
					</div>

				</div>
				<div v-if="adpayee.payee_type == 5" class="flex flex-wrap">
					<!-- 会员支付 -->

					<div class="w-1/2">
						<el-form-item :label="$t('strategy.payee.secretKey') + ':'" prop="appSecret" class="w-full">
							<el-input v-model="data.content.appSecret" :placeholder="$t('message.pleaseEnter')" />
						</el-form-item>
					</div>

					<div class="w-1/2">
						<el-form-item :label="$t('strategy.payee.apiAddress') + ':'" prop="bill_account" class="w-full">
							<el-input v-model="data.content.baseUrl" :placeholder="$t('message.pleaseEnter')" />
						</el-form-item>
					</div>
					<div class="w-1/2">
						<el-form-item :label="$t('strategy.payee.resultAddress') + ':'" prop="callbackUrl"
							class="w-full">
							<el-input v-model="data.content.callbackUrl" :placeholder="$t('message.pleaseEnter')" />
						</el-form-item>
					</div>

				</div>
			</div>
			<div class="w-full text-center">
				<div class="inline-block">
					<el-button type="primary" @click="submit()" v-prmis="'strategy_payee_getPlatformCert'">{{
						$t('public.save') }}</el-button>
					<el-button @click="cancell">{{ $t('public.cancel') }}</el-button>
				</div>
			</div>
		</el-form>

	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import Upload from '@/components/Upload/index.vue';
import payconfig from './pay_config'
import { getPlatformCert } from '@/api/payee';
import { onMounted } from 'vue'
let language = ref()
const { locale } = useI18n()
onMounted(() => {
	language.value = locale.value
})
let emit = defineEmits(['edit']);

let props = defineProps({
	adpayee: {
		// 选中的策略
		type: Object,
		default: {}
	},
	paytype: {
		// 收款类型
		type: Array,
		default: []
	}
})

let data = reactive({
	content: {},
	setname: '',
	timestatus: false
})
let getPlatform = ()=>{
	getPlatformCert({ sp_id: props.adpayee.sp_id }).then(res => { 
		if(res.state == 200 && res.data){
			data.content.platform_path =  res.data.platform_path
			data.content.platform_serial =  res.data.platform_serial
			data.content.platform_update_time =  res.data.platform_update_time
		}
	})
}

// 获取配置信息
let getpaytype = () => {
	let info = props.adpayee
	if (info.sp_id == undefined) {
		data.content = payconfig.payconobj(info.payee_type, '')
	} else {
		let obj = JSON.parse(info.content)
		data.content = payconfig.payconobj(info.payee_type, obj)
		if (info.payee_type == 1 && obj.serial) {
			getPlatformCert({ sp_id: info.sp_id }).then(res => { })
		}
	}
}

// 选择上传位置
let advance = (e) => {
	data.setname = e
}

// 上传返回
let expose = (e) => {
	if (e.status == 200) {
		data.content[data.setname] = e.file.response.data
		props.adpayee[data.setname] = e.file.response.data
	} else {
		data.content[data.setname] = ''
		props.adpayee[data.setname] = ''
	}
}

// 保存
let submit = () => {
	let obj = payconfig.verify(props.adpayee, data.content)
	if (obj == true) {
		ElMessage({
			message: $t('message.pleaseConfigMsg'),
			type: 'error'
		})
		return
	}

	emit('edit', obj);
}

// 取消
let cancell = () => {
	emit('edit', false);
}

getpaytype()

</script>
